//评论组件
import React, { useState } from 'react'

export default function Talk() {
  const [active, setActive] = useState(1)
  const [commentList, setCommentList] = useState(list)
  const changeTab = (index) => {
    setActive(index)
    setCommentList(index === 1 ? list : hotList)
  }
  const submit = (value) => {
    let arr = active === 1 ? [...list] : [...hotList]
    arr.push({
      name: '赵四',
      time: new Date().toLocaleTimeString(),
      content: value,
    })
    setCommentList(arr)
  }
  return (
    <div>
      <div className="flex mb-[10px]">
        <div className="w-[100px]">
          <span className="font-semibold mx-[10px]">评论</span>
          {commentList.length}
        </div>
        <Tabs active={active} changeTab={changeTab}></Tabs>
      </div>
      <Input submit={submit}></Input>
      <div className="pl-[100px]">
        <ListItem commentList={commentList}></ListItem>
      </div>
    </div>
  )
}
const list = [
  {
    name: '张三',
    time: new Date().toLocaleTimeString(),
    content: '这是一条评论',
  },
  {
    name: '张三',
    time: new Date().toLocaleTimeString(),
    content: '这是一条评论',
  },
]
const hotList = [
  {
    name: '王五',
    time: new Date().toLocaleTimeString(),
    content: '热门评论',
  },
  {
    name: '找死',
    time: new Date().toLocaleTimeString(),
    content: '这是一条评论',
  },
]

const Tabs = ({ active, changeTab }) => {
  return (
    <div className="flex">
      <button
        className={active === 1 ? 'text-yellow-500' : ''}
        onClick={() => {
          changeTab(1)
        }}
      >
        最新
      </button>
      <div className="w-[1px] h-[90%] bg-[#333] mx-[10px]"></div>
      <button
        className={active === 2 ? 'text-yellow-500' : ''}
        onClick={() => {
          changeTab(2)
        }}
      >
        最热
      </button>
    </div>
  )
}
const Input = ({ submit }) => {
  const [inputValue, setInputVale] = useState()
  return (
    <div className="flex h-[50px]">
      <div className="w-[100px]">
        <div className="w-[40px] h-[40px] rounded-lg mx-auto bg-gray-400">
          头像
        </div>
      </div>
      <div className="flex">
        <textarea
          className="outline w-[500px] h-[40px]"
          value={inputValue}
          onChange={(e) => setInputVale(e.target.value)}
        ></textarea>
        <button
          onClick={() => {
            submit(inputValue)
          }}
        >
          发布
        </button>
      </div>
    </div>
  )
}
const ListItem = ({ commentList }) => {
  return commentList.map((item, index) => {
    return (
      <div className="text-[12px] text-gray-400 " key={index}>
        <div>{item.name}</div>
        <div className="text-[#333] text-[16px]">{item.content}</div>
        <div>{item.time}</div>
      </div>
    )
  })
}
